<script setup lang="ts" >
import { defineAsyncComponent,ref } from 'vue'; 
const Darglist = defineAsyncComponent(()=>import('./dragfile/dargCon.vue'));  
const DargItem = defineAsyncComponent(()=>import('./dragfile/dargItem.vue'));  
const dargconsRef = ref(); 
// 增加
const adds = (e)=>{
  // 添加 
       dargconsRef.value?.addStore({
        w:200,
        h:60,
        ikey:'001s',
        x:10,
        y:10, 
        uid:'asdsss',
        selectCon:false,
        component:'Treetemps'
      })
} 
let lists = [
{       uid:'as3d',
            isdarg:true,  // 是否可以拖拽
            w: 200,
            h: 60,
            ikey: '001',
            x: 10,
            y: 10, 
            selectCon: false,
            zIndex:1,
            component: 'Treetemps'
    }
]; 
</script>
<!-- 状态改造 只有一个状态 -->


<template>
  <h2 class="titles">拖拽案例</h2>
  <div class="container">
    <!-- itemsss -->
    <div class="darglist">
      <DargItem :lists="lists"> 
         <template #items="{item}">
            <div class="btns" :data-key="item.uid">
               {{item}}
            </div>  
        </template>
    </DargItem>
    </div>
    <div class="cansCon">
      <Darglist
      ref="dargconsRef"
      > 
      </Darglist>
    </div>
   
 </div>
</template> 
<style  scoped>
 .container{ 
   width: 800px;
   display: flex;
    
 }
 .darglist{
  width: 100px;
  background: #ccc;
 }
 .title{
  font-weight: bold;
  font-size: 1.3rem;
  color: #475569;
 
 }
 .titles{
      width: 100%;
      margin: 1rem 0;
      text-align: center;
 }
</style>
